<template>
	<div class="tl filled">

		<mt-header title="提现">
			<router-link to="/mine" slot="left">
				<mt-button icon="back"> </mt-button>
			</router-link>
			<mt-button slot="right" @click="showrecord=true">
				<span class="gold">提现记录</span>
			</mt-button>
		</mt-header>

		<main class="ml20 mr20 mt20 lh50 fs16">
			<div class="clearfix set">
				<img class="fl mt5" :src="cardinfo.icon?cardinfo.icon:null" v-show="cardinfo.icon" height="40" alt="">
				<span class="fl pl5">{{cardinfo.cardState?cardinfo.issuingbankName +
					'('+cardinfo.cardNumber.substr(cardinfo.cardNumber.length-4)+')':'未绑定银行卡'}}</span>
			</div>
			<div class="clearfix mt15 set">
				<input ref="ipt" class="fl pl10 lh50 fs16" type="number" v-model="money" :placeholder="'可提金额'+getFormatMoney()+'元'">
			</div>
			<div class="lh30 fs12 fontc2">工作日2小时到账，具体请看提现规则</div>
			<mt-button class="mt30" size="large" type="primary" @click="userWithdraw">提现</mt-button>
		</main>

		<div class="mt30 ml20 mr20 fontc1">
			<ol>
				<li class="mt10">提现规则</li>
				<li class="mt5">1、交易用户为防止恶意提现，每日成功提现最多2次;</li>
				<li class="mt5">2、为防止套现和洗钱，建议您投资后进行提现；无交易提现，银行将收取提现金额2%的手续费（自理）最低2元;</li>
				<li class="mt5">3、工作日（09:00-23:00）内提现，1-2小时内到账，以实际银行时间为准。</li>
				<li class="mt5">*如遇到问题，请联系在线客服。</li>
			</ol>
		</div>
		<transition name="slide-fade1">
			<div class="record" v-show="showrecord">
				<Record @hideRecod="hideRecod" />
			</div>
		</transition>
	</div>
</template>
<script>
	import axios from "axios";
	import { MessageBox } from "mint-ui";
	import Record from "@/pages/account/Record.vue";
	import accounting from "accounting";
	import { mapState } from 'vuex'
	//account的配置更改
	accounting.settings = {
		currency: {
			symbol: "", // default currency symbol is '$'
			format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
			decimal: ".", // decimal point separator
			thousand: ",", // thousands separator
			precision: 2 // decimal places
		},
		number: {
			precision: 2, // default precision on numbers is 0
			thousand: ",",
			decimal: "."
		}
	};

	export default {
		name: "Withdraw",
		data() {
			return {
				cardinfo: {},
				money: null,
				showrecord: false
			};
		},
		components: {
			Record
		},
		created() {
			this.getCardinfo();
		},
		mounted() {
			this.$refs.ipt.focus();
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			getFormatMoney(money) {
				return accounting.format(this.userInfo.moneyDrawUsable);
			},
			getCardinfo() {
				axios
					.get("/user/user/showAuthentication.do?_" + new Date().getTime())
					.then(res => {
						res = res.data;
						if (res.code === 200) {
							this.cardinfo = res.data;
						} else {
							MessageBox("提现", res.msg);
						}
					});
			},
			userWithdraw() {
				if (!this.money) {
					MessageBox("提现", "请输入有效的提现金额");
					this.money = null;
					return;
				};

				axios({
					method: "post",
					url: "/user/finance/draw.do",
					params: {
						money: this.money
					}
				}).then(res => {
					res = res.data;
					MessageBox("提现", res.msg);
					this.money = null;
				});
			},
			hideRecod() {
				this.showrecord = false;
			}
		},
		filters: {}
	};
</script>
<style scoped>
	main .set {
		border-radius: 4px;
		border: 1px solid #e2e2e2;
	}

	input {
		border: 0 none;
	}

	.record {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		left: 0;
		overflow-y: scroll;
		background-color: #fff;
	}

	.slide-fade1-enter-active {
		transition: all 0.3s ease;
	}

	.slide-fade1-leave-active {
		transition: all 0.3s ease;
	}

	.slide-fade1-enter,
	.slide-fade1-leave-to {
		transform: translateX(100%);
	}
</style>